<template>
  <div class="body">
    <div
      class="trading-group youke"
      ref="main"
    >
      <van-nav-bar
        :title="$route.meta.name"
        fixed
        @click-right="onBack('/order/index')"
      >
        <van-icon
          name=" iconfont icontuanduicankaoxian-"
          slot="right"
        />
      </van-nav-bar>

      <div class="trading-view">
        <div class="trading-heads">
          <div>
            <div class="trading-heads-text">成交量</div>
            <div>{{cjl}}</div>
          </div>
          <div>
            <div class="trading-heads-text">最高</div>
            <div>
              $
              <span>{{max}}</span>
            </div>
          </div>
        </div>
        <!-- 图表 -->
        <div class="trading-echart">
          <div class="trading-echart-heads">
            <span>周数据展示</span>
            <i
              class="iconfont iconwenti-m"
              @click="ruleShow=true"
            ></i>
          </div>
          <div class="trading-echart-content">
            <div class="trading-echarts">
              <div
                ref="myEchart"
                class="myEchart"
              ></div>
            </div>
          </div>
        </div>
        <div class="echart-tab">
          <div>
            <span
              :class="{active:echartTabIndex==1}"
              @click="echartTab(1)"
            >小时</span>
            <span
              :class="{active:echartTabIndex==2}"
              @click="echartTab(2)"
            >日</span>
            <span
              :class="{active:echartTabIndex==3}"
              @click="echartTab(3)"
            >月</span>
          </div>
        </div>
      </div>
      <Main
        pt
        pb
      >
        <!-- 2卖出买入按钮 -->
        <div class="trading-sell-btns">
          <div @click="scllHangBtn(0)">挂卖</div>
          <div @click="scllHangBtn(1)">挂买</div>
        </div>
        <!-- 挂卖挂买列表 -->
        <div class="trading-sell-list">
          <div class="trading-sell-tabs">
            <div
              class="sell-tabs-item"
              :class="tabsindex==0?'sell-tabs-active':''"
              @click="tabsclick(true);tabsindex=0"
            >挂卖市场</div>
            <div
              class="sell-tabs-item"
              :class="tabsindex==1?'sell-tabs-active':''"
              @click="tabsclick(false);tabsindex=1"
            >挂买市场</div>
          </div>
          <div class="sell-list">
            <div
              v-show="tabsindex==0"
              class="sell-list-content"
            >
              <!-- <van-pull-refresh v-model="isLoadinghang" @refresh="onRefreshhang"> -->
              <van-list
                v-model="loadinghang"
                :finished="finishedhang"
                finished-text="没有更多了"
                @load="onLoadhang"
              >
                <div
                  v-for="item in hangList"
                  :key="item.key"
                >
                  <sell-card
                    :price="item.dj"
                    :total="item.jfs"
                    :headImg="item.image"
                    :locks="item.suodin"
                    :to="`/trading/tradsell?sell=0&id=${item.id}`"
                    @head-Click="headClick(item)"
                  ></sell-card>
                </div>
              </van-list>
              <!-- </van-pull-refresh> -->
            </div>
            <div
              v-show="tabsindex==1"
              class="sell-list-content"
            >
              <!-- <van-pull-refresh v-model="isLoadingsell" @refresh="onRefreshsell"> -->
              <van-list
                v-model="loadingsell"
                :finished="finishedsell"
                finished-text="没有更多了"
                @load="onLoadsell"
              >
                <div
                  v-for="item in sellList"
                  :key="item.key"
                >
                  <sell-card
                    :price="item.dj"
                    :total="item.jfs"
                    :hang="true"
                    :headImg="item.image"
                    :locks="item.suodin"
                    :to="`/trading/tradsell?sell=1&id=${item.id}`"
                    @head-Click="headClick(item)"
                  ></sell-card>
                </div>
              </van-list>
              <!-- </van-pull-refresh> -->
            </div>
          </div>
        </div>
      </Main>
      <!-- <Tabbar/> -->
      <!-- 点击头像弹窗 -->
      <van-popup
        v-model="headShow"
        class="van-heads-popup"
      >
        <div class="heads-popup">
          <div class="heads-popup-title">基本资料</div>
          <div class="heads-popup-content">
            <div class="heads-img">
              <img
                :src="headsItem.image"
                alt
                srcset
              >
            </div>
            <div class="heads-text">
              <div>
                昵称:
                <span>{{headsItem.cname}}</span>
              </div>
              <div>电话:{{headsItem.mobile}}</div>
            </div>
          </div>
          <div class="heads-popup-btn">
            <a
              href="javascript:void(0)"
              @click="headShow=false"
            >取消</a>
            <a :href="`tel:${headsItem.mobile}`">拨打</a>
          </div>
        </div>
      </van-popup>
      <van-popup
        v-model="ruleShow"
        class="van-heads-popup"
      >
        <div class="rule-popup">
          <div class="rule-popup-title">交易规则说明</div>
          <div class="rule-popup-content">
            <div
              class="rule-popup-view"
              v-html="rule"
            >
              <!-- <h1>一、总则</h1>1.1 的所有权和运营权归
                            <br>1.2 用户在注册之前，应当仔细阅读本协议，并同意遵守本协议后方可成为注册用户。一旦注册成功，则用户与保宝网之间自动形成协议关系，用户应当受本协议的约束。用户在使用特殊的服务或产品时，应当同意接受相关协议后方能使用。
                            <br>1.3 本协议则可由保宝网随时更新，用户应当及时关注并同意本站不承担通知义务。本站的通知、公告、声明或其它类似一、总则
                            <br>1.1 智慧晶的所有权和运营权归湖南省智慧晶科技有限公司所有。
                            <br>1.2 用户在注册之前，应当仔细阅读本协议，并同意遵守本协议后方可成为注册用户。一旦注册成功，则用户与保宝网之间自动形成协议关系，用户应当受本协议的约束。用户在使用特殊的服务或产品时，应当同意接受相关协议后方能使用。
                            1.3 本协议则可由保宝网随时更新，用户应当及时关注并同意本站不承担通知义务。本站的通知、公告、声明或其它类似内容是本协议的一部分。
                            <h1>二、服务内容</h1>2.1 保宝网的具体内容由本站根据实际情况提供。
                            2.2 本站仅提供相关的网络服务，除此之外与相关网络服务有关的设备(如个人电脑、手机、及其他与接入互联网或移动网有关的装置)及所需的费用(如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费)均应由用户自行负担。
                            <h1>三、用户帐号</h1>3.1 经本站注册系统完成注册程序并通过身份认证的用户即成为正式用户，可以获得本站规定用户所应享有的一切权限；未经认证仅享有本站规定的部分会员权限。保宝网有权对会员的权限设计进行变更。
                            3.2 用户只能按照注册要求使用真实姓名，及身份证号注册。用户有义务保证密码和帐号的安全，用户利用该密码和帐号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任，本站不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题，应立即修改帐号密码并妥善保管，如有必要，请通知本站。因黑客行为或用户的保管疏忽导致帐号非法使用，本站不承担任何责任。内容是本协议的一部分。
                            <h1>二、服务内容</h1>2.1 保宝网的具体内容由本站根据实际情况提供。
                            2.2 本站仅提供相关的网络服务，除此之外与相关网络服务有关的设备(如个人电脑、手机、及其他与接入互联网或移动网有关的装置)及所需的费用(如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费)均应由用户自行负担。
                            <h1>三、用户帐号</h1>3.1 经本站注册系统完成注册程序并通过身份认证的用户即成为正式用户，可以获得本站规定用户所应享有的一切权限；未经认证仅享有本站规定的部分会员权限。保宝网有权对会员的权限设计进行变更。
              3.2 用户只能按照注册要求使用真实姓名，及身份证号注册。用户有义务保证密码和帐号的安全，用户利用该密码和帐号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任，本站不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题，应立即修改帐号密码并妥善保管，如有必要，请通知本站。因黑客行为或用户的保管疏忽导致帐号非法使用，本站不承担任何责任。-->
            </div>
          </div>
          <div class="rule-popup-btn">
            <van-button
              type="default"
              size="small"
              @click="ruleShow=false"
            >关闭</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import sellCard from "@/components/common/sellCard";
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/line";
import "echarts/lib/component/legendScroll";
import "echarts/lib/component/tooltip";
// import 'echarts/lib/component/title';
import { trads, guide } from "@/api";
import { clearTimeout } from "timers";

const { values } = Object;
export default {
  //接收父级传递的参数
  props: [],
  //监听数据变化
  watch: {},
  data() {
    return {
      tabsindex: 0,
      hangList: [],
      sellList: [],
      max: 0,
      cjl: 0,
      myChart: null,
      headShow: false,
      ruleShow: false,
      pagehang: 1,
      loadinghang: true,
      finishedhang: false,
      isLoadinghang: true,
      pagesell: 1,
      loadingsell: true,
      finishedsell: false,
      isLoadingsell: true,
      headsItem: {
        Image: "",
        dj: "1.1",
        suodin: "1000",
        Je: "1000",
        cname: "大佬",
        mobile: "15051558397"
      },
      chartDate: [],
      priceArr: [],
      totalArr: [],
      rule: "",
      timer: null,
      echartTabIndex: 1,
      source: null
    };
  },
  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {
    this.hanglist();
    this.selllist();
  },
  //实时监控data参数数据变化
  computed: {},
  //模板组件
  components: {
    sellCard
  },
  //执行方法
  methods: {
    // 挂卖
    scllHangBtn(t) {
      this.$router.push(`/trading/tradhang?hang=${t}`);
    },
    tabsclick() {
      // this.page = 1;
      // this.sellList = [];
      // this.hangList = [];
    },
    headClick(item) {
      this.headsItem = Object.assign({}, item);
      this.headShow = true;
    },
    // 挂卖列表
    hanglist() {
      trads.tradlist({ type: 2, page: this.pagehang }).then(res => {
        if (res.code == 1000) {
          if (Number(res.count) != 0) {
            this.hangList = [...this.hangList, ...res.result];
            this.loadinghang = false;

            if (this.hangList.length == Number(res.count)) {
              this.finishedhang = true;
            }
          } else {
            this.hangList = [];
            this.finishedhang = true;
            this.loadinghang = false;
          }
        }
      });
    },
    // 挂买列表
    selllist() {
      trads.tradlist({ type: 1, page: this.pagesell }).then(res => {
        if (res.code == 1000) {
          if (Number(res.count) != 0) {
            this.sellList = [...this.sellList, ...res.result];
            this.loadingsell = false;
            // console.log(this.hangList.length == Number(res.count))
            if (this.sellList.length == Number(res.count)) {
              this.finishedsell = true;
            }
          } else {
            this.sellList = [];
            this.finishedsell = true;
            this.loadingsell = false;
          }
        }
      });
    },
    onLoadhang() {
      this.pagehang += 1;
      this.hanglist();
    },
    onRefreshhang() {
      this.hangList = [];
      this.loadinghang=true
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoadinghang = false;
        this.pagehang = 1;
        this.hanglist();
      }, 500);
    },
    onLoadsell() {
      this.pagesell += 1;
      this.selllist();
    },
    onRefreshsell() {
      this.sellList = [];
      this.loadingsell=true
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoadingsell = false;
        this.pagesell = 1;
        this.selllist();
      }, 500);
    },
    cancelQuest() {
      if (typeof this.source === "function") {
        this.source("终止请求"); //取消请求
      }
    },
    guide() {
      this.cancelQuest();
      guide.jytj({ type: this.echartTabIndex }, this).then(res => {
        if (res.code == 1000) {
          if (res.result.length != 0) {
            if (this.myChart) {
              this.myChart.hideLoading();
            }

            this.chartDate = [];
            this.totalArr = [];
            this.priceArr = [];
            for (let item of values(res.result)) {
              // if (this.echartTabIndex == 1) {
              //   item.time = item.time.slice(14);
              // }
              // if (this.echartTabIndex == 2) {
              //   item.time = item.time.slice(11, 13);
              // }

              // if (this.echartTabIndex == 3) {
              //   item.time = item.time.slice(8, 10);
              // }
              this.chartDate.push(item.time);
              this.totalArr.push(Number(item.dj));
              this.priceArr.push(Number(item.cjl));
              // this.cjl += Number(item.cjl);
            }
            // this.cjl.toFixed(0);
            // this.max = Math.max(...this.priceArr);
            this.myChart.setOption({
              xAxis: {
                data: this.chartDate
              },
              series: [
                {
                  name: "价格",
                  type: "line",
                  stack: "总量",
                  data: this.totalArr //[120, 132, 101, 134, 90, 230, 210]
                }
              ]
            });
          }
        }
      });
    },
    getEchart() {
      this.myChart = echarts.init(this.$refs.myEchart);
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [{ name: "价格" }],
          right: "10"
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {}
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [] //["12-03", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "价格",
            type: "line",
            stack: "总量",
            smooth: true,
            showSymbol: false,
            hoverAnimation: false,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#eeecf1" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#884cc3" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            data: this.totalArr //[120, 132, 101, 134, 90, 230, 210]
          }
          // {
          //   name: "交易量",
          //   type: "line",
          //   stack: "总量",
          //   data: this.priceArr //[220, 182, 191, 234, 290, 330, 310]
          // }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    ruleList() {
      guide.jyrule().then(res => {
        if (res.code == 1000) {
          this.rule = res.result;
        }
      });
    },
    setbj() {
      trads.maxcjl().then(res => {
        if (res.code == 1000) {
          this.cjl = res.result.cjl;
          this.max = res.result.max;
        }
      });
    },
    getsettime() {
      this.timer = setInterval(() => {
        this.guide();
      }, 5000);
    },
    echartTab(id) {
      this.echartTabIndex = id;
      this.myChart.showLoading();
      this.guide();
    }
  },
  destroyed() {
    if (this.timer) {
      //如果定时器在运行则关闭
      window.clearInterval(this.timer);
    }
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },

  mounted() {
    this.getEchart();
    this.setbj();
    this.myChart.showLoading();
    this.guide();
    // this.getsettime();
    this.ruleList();
  }
  //路由退出时候调用
  // beforeRouteLeave(to, from, next){next()}
};
</script>

<style scoped lang="less">

.trading-group {
  .trading-view {
    height: inherit;
    padding-top: 2.875rem;
  }

  .trading-heads {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 0.5625rem 0;
    background: #fff;
    margin-bottom: 0.5rem;

    .trading-heads-text {
      font-size: 0.8rem;
      margin-bottom: 0.2rem;
    }
  }

  // 走势图
  .trading-echart {
    background: #ffffff;

    .trading-echart-heads {
      height: 3rem;
      line-height: 3rem;
      padding-left: 1.5rem;
      position: relative;
      border-bottom: 1px solid #ededed;

      &::before {
        position: absolute;
        content: "";
        height: 1rem;
        background: #4f89fe;
        width: 4px;
        top: 1.1rem;
        left: 1rem;
      }

      i {
        margin-left: 0.5rem;
        font-size: 1.2rem;
      }
    }

    .trading-echart-content {
      height: 14rem;

      .myEchart {
        height: 14rem;
      }
    }
  }

  // 按钮
  .trading-sell-btns {
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;

    & > div {
      flex: 1;
      height: 2.5rem;
      color: #ffffff;
      line-height: 2.5rem;
      text-align: center;
      border-radius: 6px;

      &:first-child {
        background: #e74536;
        margin-right: 2rem;
      }

      &:last-child {
        background: #4f89fe;
      }
    }
  }

  // 市场
  .trading-sell-list {
    background: #ffffff;

    .trading-sell-tabs {
      display: flex;
      text-align: center;
      height: 3rem;
      line-height: 3rem;
      border-bottom: 1px solid #ededed;
      position: relative;

      .sell-tabs-item {
        flex: 1;

        &.sell-tabs-active {
          font-weight: bold;
          position: relative;

          &::before {
            position: absolute;
            content: "";
            width: 100%;
            border-bottom: 1px solid #e74536;
            left: 0;
            bottom: -1px;
          }
        }
      }
    }
  }

  i {
    &.icontuanduicankaoxian- {
      font-size: 1.5rem;
      color: #666;
    }
  }
}

.van-heads-popup {
  border-radius: 4px;
}

//头像
.heads-popup {
  width: 18.75rem;
  height: 15.625rem;
  background: #ffffff;
  border-radius: 4px;

  .heads-popup-title {
    padding: 1rem;
    font-size: 1.4rem;
  }

  .heads-popup-content {
    display: flex;
    padding: 1rem;

    .heads-img {
      width: 3.75rem;
      height: 3.75rem;
      border-radius: 50%;
      background: #000;
      margin-right: 1.5rem;

      img {
        width: 3.75rem;
        height: 3.75rem;
        border-radius: 50%;
      }
    }

    .heads-text {
      display: flex;
      height: 3.75rem;
      justify-content: space-around;
      flex-direction: column;
      font-size: 1rem;

      span {
        display: inline-block;
        margin: 0 0.5rem;
      }
    }
  }

  .heads-popup-btn {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;

    a {
      width: 6.875rem;
      height: 2.8125rem;
      display: inline-block;
      line-height: 2.8125rem;
      text-align: center;
      border-radius: 4px;
      color: #000;

      &:first-child {
        border: 1px solid #cccccc;
      }

      &:last-child {
        background: #4f89fe;
        color: #ffffff;
      }
    }
  }
}

// 规则
.rule-popup {
  background: #ffffff;
  width: 21.875rem;
  height: 27.8125rem;

  .rule-popup-title {
    padding: 1rem 0;
    text-align: center;
  }

  .rule-popup-content {
    height: 21.8125rem;
    overflow-y: auto;
    overflow-x: hidden;

    .rule-popup-view {
      padding: 0 1rem;

      h1 {
        font-size: 1rem;
      }
    }
  }

  .rule-popup-btn {
    text-align: center;
    margin-top: 0.5rem;
  }
}

.sell-list {
  height: 18rem;
  overflow: auto;

  .sell-list-content {
    .van-list {
      padding-bottom: 50px;
    }
  }
}

.echart-tab {
  background: #fff;
  padding: 0.5rem;

  div {
    width: 12rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    border: 1px solid #ededed;
    text-align: center;
    padding: 0.2rem 0;

    span {
      flex: 1;
      border-right: 1px solid #ededed;

      &:last-child {
        border-right: none;
      }

      &.active {
        color: #4f89fe;
      }
    }
  }
}
</style>
